<link href="${rc.getContextPath()}/manage/css/style.css" type="text/css" rel="stylesheet" />
<div class="pageContent">
    <div  layoutH="30">
        <img src="${rc.getContextPath()}/manage/workflow/resource/process-instance?pid=${processInstanceId!''}&type=image"/>
        <div id="processImageBorder">
            <#if nodeDto??>
                <#list nodeDto as node>
                    <#assign historys = node.history/>
                    <#if historys?size gt 0 >
                        <div id="${node.id!''}">
                        <#list historys as hostory>
                            <tr><td>${hostory.userText!''}</td><td>${hostory.result!''}</td><td>${(hostory.checkTime?string('yyyy-MM-dd HH:mm:ss'))?if_exists}</td><td>${hostory.useTime!''}</td></tr>
                        </#list>
                        </div>
                    </#if>
                    <div class="activity-attr" style="position:absolute;left:${node.x}px;top:${node.y}px;width:${node.width}px;height:${node.height}px;z-index:14999;
                     background-color: black;opacity: 0;" activitId="${node.id!''}" taskType="${node.type!''}" nodeDesc="${node.name!''}" 
                     taskRole="" currentUser="">
                    </div>
                </#list>
            </#if>
        </div>
        <!-- <#if activityInfos?exists>
            <#list activityInfos as map>
                <#assign vars = map['vars'] />
                <#if vars['workFlowHistory']??>
                    <#assign historys = vars['workFlowHistory']/>
                    <div id="${historys.activityId!''}">
                    <#list historys as hostory>
                        <tr><td>${hostory.userText!''}</td><td>${hostory.result!''}</td><td>${(hostory.checkTime?string('yyyy-MM-dd HH:mm:ss'))?if_exists}</td><td>${hostory.useTime!''}</td></tr>
                    </#list>
                    </div>
                </#if>
                <div class="activity-attr" style="position:absolute;left:${map['x']-1}px;top:${map['y']-1}px;width:${map['width']-2}px;height:${map['height']-2}px;z-index:14999;
                 background-color: black;opacity: 0;" activitId="${vars['activitId']!''}" taskType="${vars['taskType']!''}" nodeDesc="${vars['nodeDesc']!''}" memo="${vars['memo']!''}" 
                 taskRole="${vars['taskRole']!''}" currentUser="${vars['currentUser']!''}">
                </div>
                <#if map['currentActiviti']?string('yes','no') == 'yes'>
                    <div class="activity-attr-border ui-corner-all-12" style="position:absolute;left:${map['x']-1}px;top:${map['y']-1}px;width:${map['width']-4}px;height:${map['height']-3}px;
                        border:3px solid red;z-index:14998;">
                    </div>
                <#else>
                    <div class="activity-attr-border" style="position:absolute;left:${map['x']-1}px;top:${map['y']-1}px;width:${map['width']-4}px;height:${map['height']-3}px;
                     background-color: black;opacity: 0;z-index:14998;">
                    </div>
                </#if>
            </#list>
        </#if> -->
        </div>
</div>

<script type="text/javascript">
    $(function(){
          $('div.activity-attr').qtip({
              content: function() {
                  var activityId = $(this).attr("activityId");
                  var tipContent = "<table class='need-border' style='background-color: #fafcfc;'>";
                  //已处理过的节点
                  if(activityId){
                      var activityIdDIV = $("div#"+activityId);
                      tipContent += "<tr><th>处理人</th><th>处理结果</th><th>处理时间</th><th>用时</th></tr>";
                      tipContent += $(tipContent).html();
                  }else{
                      var taskType = $(this).attr("taskType");
                      var taskRole = $(this).attr("taskRole");
                      var currentUser = $(this).attr("currentUser");
                      var nodeDesc = $(this).attr("nodeDesc");
                      if(taskType && taskType!='')
                          tipContent += "<tr><td class='label'>节点类型:</td><td>" + taskType + "<td/></tr>";
                      if(taskRole && taskRole!='')
                           tipContent += "<tr><td class='label'>分配的角色:</td><td>" + taskRole + "<td/></tr>";
                      if(currentUser && currentUser!='')
                            tipContent += "<tr><td class='label'>当前处理人:</td><td>" + currentUser + "<td/></tr>";
                      if(nodeDesc && nodeDesc!='')
                             tipContent += "<tr><td class='label'>节点描述:</td><td>" + nodeDesc + "<td/></tr>";
                  }
                  tipContent += "</table>";
                  return tipContent;
              },
              position: {
                  at: 'bottom left',
                  adjust: {
                      x: 3
                  }
              }
          });
        
    })
</script>